<template>
  <div class="stroke-rehab">
    <header class="header">
      <div class="back-button" @click="goBack">
        <span>&lt;</span>
      </div>
      <h1>卒中后康复</h1>
      <div class="right-icons">
        <span class="icon">♡</span>
        <span class="icon">⋯</span>
      </div>
    </header>

    <div class="service-banner">
      <!-- <img src="https://via.placeholder.com/750x200?text=卒中后康复服务" alt="卒中后康复" class="banner-image" /> -->
      <div class="service-info">
        <h2>卒中后康复护理服务</h2>
        <!-- <div class="rating">
          <span class="stars">★★★★★</span>
          <span class="rating-count">4.9 (2000+评价)</span>
        </div>
        <div class="tags">
          <span class="tag">专业康复护士</span>
          <span class="tag">三甲医院标准</span>
          <span class="tag">上门服务</span>
        </div> -->
      </div>
    </div>

    <!-- <div class="service-tabs">
      <div class="tab" :class="{ active: activeTab === 'detail' }" @click="activeTab = 'detail'">服务详情</div>
      <div class="tab" :class="{ active: activeTab === 'review' }" @click="activeTab = 'review'">用户评价</div>
      <div class="tab" :class="{ active: activeTab === 'qa' }" @click="activeTab = 'qa'">常见问题</div>
    </div> -->

    <div class="tab-content" v-if="activeTab === 'detail'">
      <div class="service-items-grid">
        <div class="service-item-card" v-for="(item, index) in serviceItems" :key="index" @click="makeAppointment(item.title, 199)">
          <div class="item-title">{{ item.title }}</div>
        </div>
      </div>

      <!-- <div class="service-notice">
        <h3>服务须知</h3>
        <div class="notice-item">
          <h4>服务时长</h4>
          <p>单次服务约60分钟，根据患者情况可能有所调整</p>
        </div>
        <div class="notice-item">
          <h4>服务范围</h4>
          <p>全国30+城市核心区域，下单前请先确认服务地址是否在范围内</p>
        </div>
        <div class="notice-item">
          <h4>注意事项</h4>
          <p>1. 请提前准备好患者病历资料</p>
          <p>2. 保持室内通风整洁</p>
          <p>3. 家属需在场配合服务</p>
        </div>
      </div> -->
    </div>

    <!-- <div class="tab-content" v-else-if="activeTab === 'review'">
      <div class="reviews">
        <div class="review-summary">
          <div class="rating-large">4.9</div>
          <div class="stars-large">★★★★★</div>
          <div class="review-count">共2000+评价</div>
        </div>
        
        <div class="review-tags">
          <div class="review-tag active">全部</div>
          <div class="review-tag">好评(1980+)</div>
          <div class="review-tag">有图(500+)</div>
          <div class="review-tag">服务专业(800+)</div>
          <div class="review-tag">态度好(750+)</div>
        </div>
        
        <div class="review-list">
          <div class="review-item" v-for="(review, index) in reviews" :key="index">
            <div class="reviewer-info">
              <img :src="review.avatar" alt="用户头像" class="reviewer-avatar" />
              <div class="reviewer-name">{{ review.name }}</div>
              <div class="review-date">{{ review.date }}</div>
            </div>
            <div class="review-stars">★★★★★</div>
            <div class="review-content">{{ review.content }}</div>
            <div class="review-images" v-if="review.images && review.images.length">
              <img v-for="(image, i) in review.images" :key="i" :src="image" alt="评价图片" class="review-image" />
            </div>
            <div class="nurse-reply" v-if="review.reply">
              <div class="reply-title">护士回复：</div>
              <div class="reply-content">{{ review.reply }}</div>
            </div>
          </div>
        </div>
      </div>
    </div> -->

    <div class="booking-bar">

      <button class="book-button" @click="makeAppointment()">立即预约</button>
    </div>
    
    <!-- 底部占位，防止内容被底部固定栏遮挡 -->
    <!-- <div class="bottom-placeholder"></div> -->
  </div>
</template>

<script setup>
import { ref, defineEmits } from 'vue';

const emit = defineEmits(['go-back', 'show-appointment']);

const activeTab = ref('detail');

const serviceItems = ref([
  {
    title: '良肢位摆放',
  },
  {
    title: '被动关节活动',
  },
  {
    title: '呼吸训练'
  },
  {
    title: '言语治疗'
  }
]);



const qaList = ref([
  {
    question: '卒中后多久可以开始康复训练？',
    answer: '一般来说，卒中急性期稳定后即可开始早期康复训练。根据美国卒中协会指南，早期康复(24-48小时内)对预后有积极影响。但具体时间应遵医嘱，我们的护士会根据患者情况进行专业评估。',
    open: false
  },
  {
    question: '良肢位摆放需要特殊器材吗？',
    answer: '基础的良肢位摆放不需要特殊器材，主要利用枕头、靠垫等家居用品即可完成。我们的护士会指导家属如何在日常生活中正确摆放患者肢体，必要时会建议购买专业的康复辅具。',
    open: false
  },
  {
    question: '言语治疗多久能见效？',
    answer: '言语治疗的效果因人而异，取决于卒中严重程度、受损区域、患者年龄和训练频率等因素。一般来说，持续训练2-3周后可能会有初步改善，但完全恢复可能需要数月甚至更长时间的坚持训练。',
    open: false
  }
]);

const goBack = () => {
  emit('go-back');
};

const selectServiceItem = (item) => {
  console.log('选择服务项目:', item.title);
  makeAppointment(item.title, 199);
};

const toggleQA = (index) => {
  qaList.value[index].open = !qaList.value[index].open;
};

const makeAppointment = (serviceName, price) => {
  emit('show-appointment', {
    serviceName: serviceName || '卒中后康复护理服务',
    price: price || 199,
    source: 'stroke-rehab'
  });
};
</script>

<style scoped>
.stroke-rehab {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  max-width: 750px;
  margin: 0 auto;
  background-color: #f5f5f5;
  padding-bottom: 0;
  overflow-x: hidden;
  width: 100%;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  background-color: #00a163;
  color: white;
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
}

.back-button {
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header h1 {
  font-size: 18px;
  margin: 0;
  flex: 1;
  text-align: center;
}

.right-icons {
  display: flex;
  gap: 15px;
}

.icon {
  font-size: 20px;
  cursor: pointer;
}

.service-banner {
  background-color: white;
  padding: 15px;
  width: 100%;
}

.banner-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 15px;
}

.service-info h2 {
  font-size: 20px;
  margin: 0 0 10px 0;
}

.rating {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.stars {
  color: #ff9500;
  margin-right: 5px;
}

.rating-count {
  font-size: 14px;
  color: #666;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  padding: 4px 8px;
  background-color: #f0f9f6;
  color: #00a163;
  border-radius: 4px;
  font-size: 12px;
}

.service-tabs {
  display: flex;
  background-color: white;
  margin-top: 10px;
  border-bottom: 1px solid #f0f0f0;
  position: sticky;
  top: 50px;
  z-index: 99;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 15px 0;
  font-size: 14px;
  color: #666;
  position: relative;
  cursor: pointer;
}

.tab.active {
  color: #00a163;
  font-weight: bold;
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 3px;
  background-color: #00a163;
  border-radius: 3px;
}

.tab-content {
  background-color: white;
  padding: 15px;
}

.service-items-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  padding: 10px 0;
}

.service-item-card {
  background-color: #f0f9f6;
  border-radius: 8px;
  padding: 20px 15px;
  text-align: center;
  cursor: pointer;
  border: 1px solid #e0e0e0;
  transition: all 0.3s ease;
}

.service-item-card:hover {
  background-color: #e6f7f1;
  border-color: #00a163;
}

.item-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.service-process {
  margin-top: 20px;
}

.service-process h3 {
  font-size: 16px;
  margin-bottom: 15px;
}

.process-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #00a163;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
}

.step-text {
  font-size: 12px;
}

.step-arrow {
  color: #00a163;
}

.service-description {
  margin-top: 20px;
}

.service-description h3 {
  font-size: 16px;
  margin-bottom: 15px;
}

.description-content {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
}

.description-content h4 {
  font-size: 15px;
  margin: 15px 0 5px 0;
}

.description-content p {
  margin: 0 0 10px 0;
}

.service-notice {
  margin-top: 20px;
}

.service-notice h3 {
  font-size: 16px;
  margin-bottom: 15px;
}

.notice-item {
  margin-bottom: 15px;
}

.notice-item h4 {
  font-size: 15px;
  margin: 0 0 5px 0;
}

.notice-item p {
  font-size: 14px;
  color: #666;
  margin: 0 0 5px 0;
}

.reviews {
  padding-bottom: 20px;
}

.review-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.rating-large {
  font-size: 36px;
  font-weight: bold;
  color: #ff9500;
}

.stars-large {
  font-size: 24px;
  color: #ff9500;
  margin: 5px 0;
}

.review-count {
  font-size: 14px;
  color: #666;
}

.review-tags {
  display: flex;
  overflow-x: auto;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 10px;
}

.review-tag {
  padding: 6px 12px;
  background-color: #f5f5f5;
  border-radius: 20px;
  font-size: 12px;
  white-space: nowrap;
}

.review-tag.active {
  background-color: #e6f7f1;
  color: #00a163;
}

.review-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.review-item {
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.reviewer-info {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.reviewer-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}

.reviewer-name {
  font-size: 14px;
  font-weight: bold;
  margin-right: 10px;
}

.review-date {
  font-size: 12px;
  color: #999;
}

.review-stars {
  font-size: 14px;
  color: #ff9500;
  margin-bottom: 10px;
}

.review-content {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 10px;
}

.review-images {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  overflow-x: auto;
  padding-bottom: 5px;
}

.review-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

.nurse-reply {
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
  font-size: 13px;
}

.reply-title {
  color: #00a163;
  margin-bottom: 5px;
}

.reply-content {
  font-size: 14px;
  color: #666;
}

.qa-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.qa-item {
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 15px;
}

.question {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
}

.q-icon {
  width: 20px;
  height: 20px;
  background-color: #00a163;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-right: 10px;
}

.q-text {
  flex: 1;
  font-size: 15px;
  font-weight: bold;
}

.q-arrow {
  font-size: 12px;
  color: #999;
  transition: transform 0.3s;
}

.arrow-down {
  transform: rotate(180deg);
}

.answer {
  display: flex;
  align-items: flex-start;
  margin-top: 10px;
  padding-left: 30px;
}

.a-icon {
  width: 20px;
  height: 20px;
  background-color: #ff9500;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-right: 10px;
}

.a-text {
  flex: 1;
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.booking-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  background-color: white;
  position: fixed;
  bottom: 60px;
  left: 0;
  right: 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  max-width: 750px;
  margin: 0 auto;
  z-index: 99;
}

.price-info {
  display: flex;
  align-items: baseline;
}

.price {
  font-size: 24px;
  color: #ff4d4f;
  font-weight: bold;
}

.price-desc {
  font-size: 12px;
  color: #666;
  margin-left: 5px;
}

.book-button {
  padding: 10px 30px;
  background-color: #ff4d4f;
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 16px;
  width: 90%;
  margin: 0 auto;
  cursor: pointer;
}

/* .bottom-placeholder {
  height: 120px;
  width: 100%;
} */
</style> 